<template>
  <div class="wzqgame">
    <div class="headerhh">
      <div @click="goBack"
           style="float: left; height: 0.98rem;">
        <a-icon type="left"
                class="icon" />
        <a class="h3">扫雷</a>
      </div>
    </div>
    <div id="pagetip"></div>
    <div id="game_box">
      <div id="map"></div>
      <div id="time">时间：<input type="text"
               value="0"
               disabled="disabled" />&nbsp;&nbsp;炸弹：<input type="text"
               value="50"
               disabled="disabled" /></div>

      <input id="not_boomb"
             type="button"
             value="翻开"
             @click="turn_over($event)" />
      <input id="boomb"
             type="button"
             value="插旗"
             @click="flag($event)" />
    </div>
    <div id="restart"
         class="restart"
         @click="restartClick">
      <span>重新开始</span>
    </div>
  </div>
</template>

<script>
import { saolei } from './gamejs/saolei'
export default {
  data () {
    return {
    }
  },
  inject: ['reload'],
  methods: {
    turn_over (event) {
      saolei.turn_over()
      let boomb = document.getElementById('boomb')
      let evt = event.currentTarget
      if (boomb.classList.contains('cur')) {
        boomb.classList.remove('cur')
        evt.classList.add('cur')
      } else {
        evt.classList.add('cur')
      }
    },
    flag () {
      saolei.flag()
      let notboomb = document.getElementById('not_boomb')
      let evt = event.currentTarget
      if (notboomb.classList.contains('cur')) {
        notboomb.classList.remove('cur')
        evt.classList.add('cur')
      } else {
        evt.classList.add('cur')
      }
    },
    goBack: function () {
      this.$router.go(-1)
    },
    restartClick: function () {
      this.reload()
    }
  },
  mounted () {
    saolei.ddd()
  }
}
</script>

<style lang="stylus" scoped>
.headerhh {
  height: 0.98rem;
  text-align: justify;
  line-height: 0.98rem;
  padding-left: 0.3rem;
  background: #27ae9e;
}

.icon {
  font-size: 0.36rem;
  color: #fff;
  // vertical-align: -0.23rem;
  vertical-align: -0.06rem;
}

.h3 {
  display: inline-block;
  font-size: 0.36rem;
  color: #fff;
}

#pagetip {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0.8rem 0;
  font-weight: bold;
}

#restart {
  text-align: center;
  margin: 0.6rem 0 0 0;
}

#restart span {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #27ae9e;
  border-radius: 5px;
  cursor: pointer;
}

#game_box input {
  border: 1px solid #000;
}

#game_box input.cur {
  border: 1px solid #f00;
  color: #f00;
}
</style>
